页面过渡动画添加方法(Next.JS VS Astro)
Next.JS
在 Next.JS 上我是通过 framer-motion (https://www.framer.com/motion/)来实现页面之间的过渡动画，实现起来也很简单。
一、安装；
npm install framer-motion
二、要建立一个布局来方便调用，在 layouts 上新建 MotionLayout.tsx；
'use client'
import { motion } from 'framer-motion'
import { ReactNode } from 'react'
interface Props {
children: ReactNode
}
export default function MotionLayout({ children }: Props) {
const variants = {
{/* 自定义动画 */}
hidden: { opacity: 0, x: 200 },
enter: { opacity: 1, x: 0 },
exit: { opacity: 0, x: 0 },
}
return (
<motion.main
data-scroll
className="mb-auto"
initial="hidden"
animate="enter"
exit="exit"
variants={variants}
transition={{ duration: 0.5, ease: 'easeInOut' }}
>
{children}
</motion.main>
)
}
三、在需要加入动画的地方用 <MotionLayout> </MotionLayout> 包裹起来即可。简单举例，如果我们要让点击进入文章页面时有一个过渡动画，则可以在 app/blog/[...slug]/page.tsx 上修改；
import MotionLayout from '@/layouts/MotionPost'
// ...
return (
<>
<MotionLayout>
{/* 被包裹的内容 */}
</MotionLayout>
</>
)
}
至此，这就是在 Next.JS 上添加过渡动画的全部过程了，很简单是不是？我们可以创建多个动画布局，只需在自定义动画时简单设置一下，就可以让各个页面组合出各自的过渡动画效果。
效果演示：
Astro
Astro 自带了 View Transitions API，通过它可以更方便的实现我们所需要的页面过渡动画效果。
一、添加 <ViewTransitions /> 路由组件；
---
import { ViewTransitions } from 'astro:transitions'
---
<head>
<ViewTransitions />
</head>
添加这个组件后就实现了局部刷新。
二、在需要添加页面过渡动画的标签或类上加上 transition:name="laomai" 即可（name 可自定义）。简单举例，如果我们同样要让点击进入文章页面时有一个过渡动画，则可以在 src/pages/blog/[slug].astro 上修改；
<BaseLayout>
<article class="mb-16 mt-8 sm:mb-24 xl:mt-20" transition:name="laomai">
// ...
</article>
</BaseLayout>
这样我们就给文章页面使用了默认的动画效果 fade，如果我们需要自定义动画也非常简单，只需如下修改即可：
---
import { fade } from 'astro:transitions'
---
<BaseLayout>
<article class="mb-16 mt-8 sm:mb-24 xl:mt-20" transition:name="laomai" transition:animate={fade({ duration: '1s' })}>
// ...
</article>
</BaseLayout>
更多自定义参数可查阅：https://docs.astro.build/en/guides/view-transitions/#customizing-animations
效果演示：
总结
其实在 Next.JS 和 Astro 上实现页面过渡动画都挺简单的，但由于 Astro 是自带的 API，因此个人认为 Astro 会更简单、更灵活。
当然了，这只限于简单的页面过渡动画需求。Framer Motion 有着更强大的功能，如果你有这方面的需求，那就卷起来吧。